<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文章内容词云图 - 舆情分析系统</title>
    <link rel="stylesheet" href="../../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../../css/common.css">
    <style>
        .container {
            padding: 20px;
            background: #f5f5f5;
            min-height: 100vh;
        }
        
        .page-header {
            background: white;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .page-title {
            font-size: 24px;
            font-weight: bold;
            color: #333;
            margin: 0;
        }
        
        .filter-section {
            background: white;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .chart-container {
            background: white;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .chart-title {
            font-size: 18px;
            font-weight: bold;
            color: #333;
            margin-bottom: 20px;
        }
        
        .chart-wrapper {
            height: 500px;
        }
        
        .stats-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }
        
        .stat-card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            text-align: center;
        }
        
        .stat-number {
            font-size: 28px;
            font-weight: bold;
            color: #1890ff;
            margin-bottom: 10px;
        }
        
        .stat-label {
            color: #666;
            font-size: 14px;
        }
        
        .word-cloud-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }
        
        .word-cloud-item {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .word-cloud-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            margin-bottom: 15px;
            text-align: center;
        }
        
        .word-cloud-chart {
            height: 300px;
        }
        
        .loading {
            text-align: center;
            padding: 50px;
            color: #999;
        }
    </style>
</head>
<body>
    <div id="app" class="container">
        <!-- 页面头部 -->
        <div class="page-header">
            <h1 class="page-title">文章内容词云图</h1>
        </div>

        <!-- 筛选条件 -->
        <div class="filter-section">
            <form class="layui-form" lay-filter="filterForm">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">统计时间</label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" id="dateRange" placeholder="请选择日期范围">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">平台</label>
                        <div class="layui-input-inline">
                            <select name="platform" lay-filter="platform">
                                <option value="">全部平台</option>
                                <option value="weibo">微博</option>
                                <option value="zhihu">知乎</option>
                                <option value="douyin">抖音</option>
                                <option value="bilibili">B站</option>
                                <option value="toutiao">头条</option>
                                <option value="douban">豆瓣</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">内容类型</label>
                        <div class="layui-input-inline">
                            <select name="contentType" lay-filter="contentType">
                                <option value="">全部类型</option>
                                <option value="title">标题</option>
                                <option value="content">正文</option>
                                <option value="comment">评论</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button type="button" class="layui-btn" @click="searchData">查询</button>
                        <button type="button" class="layui-btn layui-btn-primary" @click="resetFilter">重置</button>
                    </div>
                </div>
            </form>
        </div>

        <!-- 统计卡片 -->
        <div class="stats-cards">
            <div class="stat-card">
                <div class="stat-number">{{ stats.totalWords }}</div>
                <div class="stat-label">总词汇数</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">{{ stats.uniqueWords }}</div>
                <div class="stat-label">独立词汇数</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">{{ stats.topWord }}</div>
                <div class="stat-label">高频词汇</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">{{ stats.avgFrequency }}</div>
                <div class="stat-label">平均频次</div>
            </div>
        </div>

        <!-- 词云图网格 -->
        <div class="word-cloud-grid">
            <div class="word-cloud-item">
                <div class="word-cloud-title">全平台词云图</div>
                <div id="allPlatformCloud" class="word-cloud-chart"></div>
            </div>
            <div class="word-cloud-item">
                <div class="word-cloud-title">正面情感词云图</div>
                <div id="positiveCloud" class="word-cloud-chart"></div>
            </div>
            <div class="word-cloud-item">
                <div class="word-cloud-title">负面情感词云图</div>
                <div id="negativeCloud" class="word-cloud-chart"></div>
            </div>
            <div class="word-cloud-item">
                <div class="word-cloud-title">中性情感词云图</div>
                <div id="neutralCloud" class="word-cloud-chart"></div>
            </div>
        </div>

        <!-- 平台词云对比 -->
        <div class="chart-container">
            <h3 class="chart-title">平台词云对比</h3>
            <div id="platformComparisonCloud" class="chart-wrapper"></div>
        </div>

        <!-- 词汇频次统计 -->
        <div class="chart-container">
            <h3 class="chart-title">词汇频次统计</h3>
            <div id="wordFrequencyChart" class="chart-wrapper"></div>
        </div>

        <!-- 词汇情感分布 -->
        <div class="chart-container">
            <h3 class="chart-title">词汇情感分布</h3>
            <div id="wordSentimentChart" class="chart-wrapper"></div>
        </div>
    </div>

    <!-- 引入依赖 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="../../lib/echarts/echarts.min.js"></script>
    <script src="../../lib/layui/layui.js"></script>
    <script src="../../js/api.js"></script>
    
    <script>
        new Vue({
            el: '#app',
            data: {
                stats: {
                    totalWords: 0,
                    uniqueWords: 0,
                    topWord: '',
                    avgFrequency: 0
                },
                allPlatformCloud: null,
                positiveCloud: null,
                negativeCloud: null,
                neutralCloud: null,
                platformComparisonCloud: null,
                wordFrequencyChart: null,
                wordSentimentChart: null,
                filterParams: {
                    startDate: '',
                    endDate: '',
                    platform: '',
                    contentType: ''
                },
                loading: false
            },
            mounted() {
                this.initLayui();
                this.initCharts();
                this.loadData();
            },
            methods: {
                // 初始化Layui
                initLayui() {
                    layui.use(['form', 'laydate'], () => {
                        const form = layui.form;
                        const laydate = layui.laydate;
                        
                        // 初始化日期选择器
                        laydate.render({
                            elem: '#dateRange',
                            type: 'date',
                            range: true,
                            done: (value) => {
                                if (value) {
                                    const dates = value.split(' - ');
                                    this.filterParams.startDate = dates[0];
                                    this.filterParams.endDate = dates[1];
                                }
                            }
                        });
                        
                        form.render();
                    });
                },

                // 初始化图表
                initCharts() {
                    this.allPlatformCloud = echarts.init(document.getElementById('allPlatformCloud'));
                    this.positiveCloud = echarts.init(document.getElementById('positiveCloud'));
                    this.negativeCloud = echarts.init(document.getElementById('negativeCloud'));
                    this.neutralCloud = echarts.init(document.getElementById('neutralCloud'));
                    this.platformComparisonCloud = echarts.init(document.getElementById('platformComparisonCloud'));
                    this.wordFrequencyChart = echarts.init(document.getElementById('wordFrequencyChart'));
                    this.wordSentimentChart = echarts.init(document.getElementById('wordSentimentChart'));
                },

                // 加载数据
                async loadData() {
                    try {
                        this.loading = true;
                        
                        // 加载统计数据
                        await this.loadStats();
                        
                        // 加载图表数据
                        await this.loadChartData();
                        
                    } catch (error) {
                        console.error('加载数据失败:', error);
                        layui.use('layer', () => {
                            layui.layer.msg('加载数据失败', {icon: 2});
                        });
                    } finally {
                        this.loading = false;
                    }
                },

                // 加载统计数据
                async loadStats() {
                    try {
                        const response = await API.opinion.getWordCloudStats(this.filterParams);
                        this.stats = response;
                    } catch (error) {
                        console.error('加载统计数据失败:', error);
                        // 使用模拟数据
                        this.stats = {
                            totalWords: 15600,
                            uniqueWords: 3200,
                            topWord: '人工智能',
                            avgFrequency: 85
                        };
                    }
                },

                // 加载图表数据
                async loadChartData() {
                    try {
                        const response = await API.opinion.getWordCloudData(this.filterParams);
                        this.updateCharts(response);
                    } catch (error) {
                        console.error('加载图表数据失败:', error);
                        // 使用模拟数据
                        this.updateCharts(this.getMockChartData());
                    }
                },

                // 更新图表
                updateCharts(data) {
                    this.updateAllPlatformCloud(data);
                    this.updateSentimentClouds(data);
                    this.updatePlatformComparisonCloud(data);
                    this.updateWordFrequencyChart(data);
                    this.updateWordSentimentChart(data);
                },

                // 更新全平台词云图
                updateAllPlatformCloud(data) {
                    const words = data.allPlatformData || [
                        {name: '人工智能', value: 150},
                        {name: '技术', value: 120},
                        {name: '发展', value: 100},
                        {name: '创新', value: 85},
                        {name: '未来', value: 80},
                        {name: '科技', value: 75},
                        {name: '应用', value: 70},
                        {name: '研究', value: 65},
                        {name: '数据', value: 60},
                        {name: '算法', value: 55}
                    ];
                    
                    const option = {
                        tooltip: {
                            show: true
                        },
                        series: [{
                            type: 'wordCloud',
                            shape: 'circle',
                            left: 'center',
                            top: 'center',
                            width: '70%',
                            height: '80%',
                            right: null,
                            bottom: null,
                            sizeRange: [12, 60],
                            rotationRange: [-90, 90],
                            rotationStep: 45,
                            gridSize: 8,
                            drawOutOfBound: false,
                            textStyle: {
                                fontFamily: 'sans-serif',
                                fontWeight: 'bold',
                                color: function () {
                                    return 'rgb(' + [
                                        Math.round(Math.random() * 160),
                                        Math.round(Math.random() * 160),
                                        Math.round(Math.random() * 160)
                                    ].join(',') + ')';
                                }
                            },
                            emphasis: {
                                focus: 'self',
                                textStyle: {
                                    shadowBlur: 10,
                                    shadowColor: '#333'
                                }
                            },
                            data: words
                        }]
                    };
                    this.allPlatformCloud.setOption(option);
                },

                // 更新情感词云图
                updateSentimentClouds(data) {
                    // 正面情感词云
                    const positiveWords = data.positiveData || [
                        {name: '优秀', value: 80},
                        {name: '创新', value: 70},
                        {name: '发展', value: 65},
                        {name: '进步', value: 60},
                        {name: '成功', value: 55}
                    ];
                    
                    const positiveOption = {
                        series: [{
                            type: 'wordCloud',
                            shape: 'circle',
                            left: 'center',
                            top: 'center',
                            width: '70%',
                            height: '80%',
                            sizeRange: [12, 50],
                            rotationRange: [-90, 90],
                            rotationStep: 45,
                            gridSize: 8,
                            textStyle: {
                                fontFamily: 'sans-serif',
                                fontWeight: 'bold',
                                color: '#52c41a'
                            },
                            data: positiveWords
                        }]
                    };
                    this.positiveCloud.setOption(positiveOption);

                    // 负面情感词云
                    const negativeWords = data.negativeData || [
                        {name: '问题', value: 70},
                        {name: '困难', value: 60},
                        {name: '挑战', value: 55},
                        {name: '风险', value: 50},
                        {name: '担忧', value: 45}
                    ];
                    
                    const negativeOption = {
                        series: [{
                            type: 'wordCloud',
                            shape: 'circle',
                            left: 'center',
                            top: 'center',
                            width: '70%',
                            height: '80%',
                            sizeRange: [12, 50],
                            rotationRange: [-90, 90],
                            rotationStep: 45,
                            gridSize: 8,
                            textStyle: {
                                fontFamily: 'sans-serif',
                                fontWeight: 'bold',
                                color: '#ff4d4f'
                            },
                            data: negativeWords
                        }]
                    };
                    this.negativeCloud.setOption(negativeOption);

                    // 中性情感词云
                    const neutralWords = data.neutralData || [
                        {name: '分析', value: 75},
                        {name: '研究', value: 65},
                        {name: '数据', value: 60},
                        {name: '报告', value: 55},
                        {name: '统计', value: 50}
                    ];
                    
                    const neutralOption = {
                        series: [{
                            type: 'wordCloud',
                            shape: 'circle',
                            left: 'center',
                            top: 'center',
                            width: '70%',
                            height: '80%',
                            sizeRange: [12, 50],
                            rotationRange: [-90, 90],
                            rotationStep: 45,
                            gridSize: 8,
                            textStyle: {
                                fontFamily: 'sans-serif',
                                fontWeight: 'bold',
                                color: '#faad14'
                            },
                            data: neutralWords
                        }]
                    };
                    this.neutralCloud.setOption(neutralOption);
                },

                // 更新平台对比词云图
                updatePlatformComparisonCloud(data) {
                    const platformData = data.platformData || {
                        weibo: [
                            {name: '热点', value: 100},
                            {name: '话题', value: 80},
                            {name: '讨论', value: 70}
                        ],
                        zhihu: [
                            {name: '分析', value: 90},
                            {name: '专业', value: 75},
                            {name: '深度', value: 65}
                        ],
                        douyin: [
                            {name: '视频', value: 85},
                            {name: '创意', value: 70},
                            {name: '有趣', value: 60}
                        ]
                    };
                    
                    const option = {
                        tooltip: {
                            show: true
                        },
                        series: [
                            {
                                type: 'wordCloud',
                                shape: 'circle',
                                left: '10%',
                                top: '10%',
                                width: '25%',
                                height: '35%',
                                sizeRange: [12, 40],
                                textStyle: {
                                    fontFamily: 'sans-serif',
                                    fontWeight: 'bold',
                                    color: '#e6162d'
                                },
                                data: platformData.weibo
                            },
                            {
                                type: 'wordCloud',
                                shape: 'circle',
                                left: '37.5%',
                                top: '10%',
                                width: '25%',
                                height: '35%',
                                sizeRange: [12, 40],
                                textStyle: {
                                    fontFamily: 'sans-serif',
                                    fontWeight: 'bold',
                                    color: '#0084ff'
                                },
                                data: platformData.zhihu
                            },
                            {
                                type: 'wordCloud',
                                shape: 'circle',
                                left: '65%',
                                top: '10%',
                                width: '25%',
                                height: '35%',
                                sizeRange: [12, 40],
                                textStyle: {
                                    fontFamily: 'sans-serif',
                                    fontWeight: 'bold',
                                    color: '#000000'
                                },
                                data: platformData.douyin
                            }
                        ]
                    };
                    this.platformComparisonCloud.setOption(option);
                },

                // 更新词汇频次统计图表
                updateWordFrequencyChart(data) {
                    const words = data.frequencyData?.words || ['人工智能', '技术', '发展', '创新', '未来', '科技', '应用', '研究', '数据', '算法'];
                    const frequencies = data.frequencyData?.frequencies || [150, 120, 100, 85, 80, 75, 70, 65, 60, 55];
                    
                    const option = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            data: words,
                            axisLabel: {
                                rotate: 45
                            }
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name: '频次',
                                type: 'bar',
                                data: frequencies
                            }
                        ]
                    };
                    this.wordFrequencyChart.setOption(option);
                },

                // 更新词汇情感分布图表
                updateWordSentimentChart(data) {
                    const sentimentData = data.sentimentDistribution || [
                        {name: '正面', value: 45},
                        {name: '中性', value: 35},
                        {name: '负面', value: 20}
                    ];
                    
                    const option = {
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b}: {c} ({d}%)'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left'
                        },
                        series: [
                            {
                                name: '情感分布',
                                type: 'pie',
                                radius: '50%',
                                data: sentimentData.map(item => ({
                                    ...item,
                                    itemStyle: {
                                        color: item.name === '正面' ? '#52c41a' : 
                                               item.name === '负面' ? '#ff4d4f' : '#faad14'
                                    }
                                })),
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
                    this.wordSentimentChart.setOption(option);
                },

                // 获取模拟图表数据
                getMockChartData() {
                    return {
                        allPlatformData: [
                            {name: '人工智能', value: 150},
                            {name: '技术', value: 120},
                            {name: '发展', value: 100},
                            {name: '创新', value: 85},
                            {name: '未来', value: 80},
                            {name: '科技', value: 75},
                            {name: '应用', value: 70},
                            {name: '研究', value: 65},
                            {name: '数据', value: 60},
                            {name: '算法', value: 55}
                        ],
                        positiveData: [
                            {name: '优秀', value: 80},
                            {name: '创新', value: 70},
                            {name: '发展', value: 65},
                            {name: '进步', value: 60},
                            {name: '成功', value: 55}
                        ],
                        negativeData: [
                            {name: '问题', value: 70},
                            {name: '困难', value: 60},
                            {name: '挑战', value: 55},
                            {name: '风险', value: 50},
                            {name: '担忧', value: 45}
                        ],
                        neutralData: [
                            {name: '分析', value: 75},
                            {name: '研究', value: 65},
                            {name: '数据', value: 60},
                            {name: '报告', value: 55},
                            {name: '统计', value: 50}
                        ],
                        platformData: {
                            weibo: [
                                {name: '热点', value: 100},
                                {name: '话题', value: 80},
                                {name: '讨论', value: 70}
                            ],
                            zhihu: [
                                {name: '分析', value: 90},
                                {name: '专业', value: 75},
                                {name: '深度', value: 65}
                            ],
                            douyin: [
                                {name: '视频', value: 85},
                                {name: '创意', value: 70},
                                {name: '有趣', value: 60}
                            ]
                        },
                        frequencyData: {
                            words: ['人工智能', '技术', '发展', '创新', '未来', '科技', '应用', '研究', '数据', '算法'],
                            frequencies: [150, 120, 100, 85, 80, 75, 70, 65, 60, 55]
                        },
                        sentimentDistribution: [
                            {name: '正面', value: 45},
                            {name: '中性', value: 35},
                            {name: '负面', value: 20}
                        ]
                    };
                },

                // 查询数据
                searchData() {
                    this.loadData();
                },

                // 重置筛选条件
                resetFilter() {
                    this.filterParams = {
                        startDate: '',
                        endDate: '',
                        platform: '',
                        contentType: ''
                    };
                    layui.use('form', () => {
                        layui.form.val('filterForm', this.filterParams);
                    });
                    this.loadData();
                }
            }
        });

        // 响应式处理
        window.addEventListener('resize', () => {
            const app = document.querySelector('#app').__vue__;
            if (app.allPlatformCloud) app.allPlatformCloud.resize();
            if (app.positiveCloud) app.positiveCloud.resize();
            if (app.negativeCloud) app.negativeCloud.resize();
            if (app.neutralCloud) app.neutralCloud.resize();
            if (app.platformComparisonCloud) app.platformComparisonCloud.resize();
            if (app.wordFrequencyChart) app.wordFrequencyChart.resize();
            if (app.wordSentimentChart) app.wordSentimentChart.resize();
        });
    </script>
</body>
</html>